<template>
	<view class="detail">
		<custom-navi :show-home="false" background='rgba(0, 144, 250, 1)' zindex='999'>{{title}}</custom-navi>
		<view class="detail-choice">
			<view class="date">2020-01-26 15:35:42 今日</view>
			<view class="day">
				<view class="dayNum" v-for="(item,index) in dayList" :key="index" :class="{'blue':item.type}" @tap="dayBtn(item)">
					{{item.title}}
				</view>
			</view>
		</view>
		<view class="detail-content">
			<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData">
			<view class="list" v-for="(item,index) in dataList" :key="index">
				<view class="list-txt">
					<view class="title">{{item.title}}</view>
					<view class="earnings">{{item.earnings}}</view>
				</view>
				<view class="list-time">
					{{item.time}}
				</view>
			</view>
			</s-pull-scroll>
		</view>
	</view>
</template>

<script>
	import sPullScroll from '@/src/pages/components/s-pull-scroll/index.vue';
	export default {
		components: { sPullScroll },
		data(){
			return{
				title:'商品推广收益',
				typeId:'',
				dayList:[
					{title:'实时',type:true},
					{title:'近3天',type:false},
					{title:'近7天',type:false},
					{title:'近30天',type:false}
				],
				dataList:[
					{title:'推广收益',time:'1月13日',earnings:'+88.03'},
					{title:'推广收益',time:'1月13日',earnings:'+88.03'},
					{title:'推广收益',time:'1月13日',earnings:'+88.03'},
					{title:'推广收益',time:'1月13日',earnings:'+88.03'},
					{title:'推广收益',time:'1月13日',earnings:'+88.03'},
					{title:'推广收益',time:'1月13日',earnings:'+88.03'},
					{title:'推广收益',time:'1月13日',earnings:'+88.03'},
					{title:'推广收益',time:'1月13日',earnings:'+88.03'},
				]
			}
				
		},
		onLoad(option){
			this.typeId = option.type
			
			if(option.type === '1'){
				this.title = '商品推广收益'
			}else if(option.type === '2'){
				this.title = '渠道拓展收益'
			}else if(option.type === '3'){
				this.title = '商家增值/收益'
			}
		},
		methods:{
			//****************************************************
			refresh() {
				this.$nextTick(() => {
					this.$refs.pullScroll.refresh();
				});
			},
			pullDown(pullScroll) {
				setTimeout(() => {
					this.loadData(pullScroll);
				}, 200);
			},
			loadData(pullScroll) {
				setTimeout(() => {
					if (pullScroll.page == 1) {
						this.page =1
						this.size=10
						// this.listFrom()
					}else{
						if(this.size>this.total){
							pullScroll.empty()
						}else{
							// this.page=this.page+1
							this.size=this.size+10
							// this.listPush()
							// this.listFrom()
						}
					}
					
					pullScroll.success();
				}, 1000);
			},
			//**********************************************************
			dayBtn(item){
				if(item.type===true){
					
				}else{
					for(var i=0;i<this.dayList.length;i++){
						this.dayList[i].type = false
					}
					item.type = true
				}
			}
		}
	}
	
</script>

<style lang="scss">
	.detail{
		height: 100vh;
		background-color: #FFFFFF;
		&-content{
			position: relative;
			height: 77%;
			// margin-top: 20rpx;
			.list{
				padding: 36rpx 40rpx;
				border-bottom: 2rpx solid rgba(229, 234, 238, 1);
				&-time{
					font-size:28rpx;
					font-family:Source Han Sans CN;
					font-weight:400;
					color:rgba(207,207,207,1);
					opacity:1;
				}
				&-txt{
					display: flex;
					.title{
						font-size:32rpx;
						font-family:Source Han Sans CN;
						font-weight:400;
						color:rgba(69,69,69,1);
						opacity:1;
					}
					.earnings{
						margin-left: auto;
						font-size:36rpx;
						font-family:Source Han Sans CN;
						font-weight:bold;
						color:rgba(242,85,85,1);
						opacity:1;
					}
				}
			}
		}
		&-choice{
			width:100%;
			height:186rpx;
			background:rgba(255,255,255,1);
			box-shadow:0rpx 6rpx 12rpx rgba(0,0,0,0.16);
			opacity:1;
			z-index: 998;
			.date{
				padding: 24rpx 40rpx;
				border-bottom:2rpx solid rgba(225,225,225,1);
				font-size:28rpx;
				font-family:Source Han Sans CN;
				font-weight:400;
				color:rgba(69,69,69,1);
				opacity:1;
			}
			.day{
				display: flex;
				padding: 28rpx 40rpx;
				.dayNum{
					font-size:28rpx;
					font-family:Source Han Sans CN;
					font-weight:400;
					color:rgba(77,77,77,1);
					opacity:1;
					margin-right: 70rpx;
				}
				.blue{
					color: rgba(0, 144, 250, 1);
				}
			}
		}
	}
</style>
